<template>
  <div
    class="mt-2 bg-[#CCCCCC] shadow-[#b8bcbd] shadow-sm px-4 py-3 rounded-[10px] flex justify-between items-end relative">
    <div class="flex gap-2 items-center">
      <div
        class="w-[40px] h-[40px] flex justify-center items-center bg-[#2A82E4] shadow-[#83b1e6] shadow-sm rounded-[5px]">
        <span class="text-white text-lg">导</span>
      </div>

      <div class="flex gap-1 flex-col">
        <div class="flex gap-2 items-center">
          <RopeSkipping theme="outline" size="16" fill="#2c3e50" />
          <span class="text-sm">导 线:</span>
          <span class="text-sm text-gray-800">LGJ-400/50</span>
        </div>

        <div class="flex gap-2 items-center">
          <Ruler theme="outline" size="16" fill="#2c3e50" />
          <span class="text-sm">剩余长度:</span>
          <span class="text-sm text-gray-800">2500m</span>
        </div>
      </div>
    </div>

    <div class="text-lg flex justify-center items-center gap-1">
      <span class="text-black">使用</span>
      <span class="text-[#0FBD06] font-bold">100</span>
      <span class="text-black">盘</span>
      <FileEditingOne theme="outline" size="16" fill="#e74c3c" class="cursor-pointer" />
    </div>

    <div
      class="flex gap-1 items-center bg-[#A6A6A6] px-3 py-1 absolute top-0 right-0 rounded-tr-[10px] rounded-bl-[10px]">
      <span class="text-xs text-black">剩余</span>
      <span class="text-xs font-bold text-red-600">100</span>
      <span class="text-xs text-black">盘</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { FileEditingOne, RopeSkipping, Ruler } from '@icon-park/vue-next'
import { ref } from 'vue'

const wireNum = ref(1)
</script>

<style></style>
